<template>
	<view class="my-buy-index" style="width: 750rpx;position: relative;">
		<!-- 已购设备产品 -->
		<view class="title">
			已购设备
		</view>
		<view class="buy-device" style="position: relative; box-sizing: border-box; width: 700rpx;height: 80px;margin: 0 auto;">
			<view class="buy-device-body position-center" style="box-sizing: border-box; 
													width: 700rpx; background-color: #eee;
													height: 60px; border-radius: 5px;
													box-shadow: 0 0 10px 0 #eee;">
				<view class="buy-device-select position-center"
					  style="width: 600rpx;
							 font-size: 20px;background-color: white;">
					<uni-data-select
						v-model="deviceChoseValue"
						:localdata="deviceList"
						@change="deviceChange"
						placeholder="请选择设备"
						emptyTips="暂无设备"
						:clear="false"
					></uni-data-select>
				</view>
			</view>
		</view>
		<!-- 已购内容产品 -->
		<view class="title">
			已购内容
		</view>
		<view class="buy-list" style="width: 700rpx;margin: 5px auto;">
			<!-- <checkbox-group @change="changeCheck($event)"> -->
			<checkbox-group>
				<!-- <radio-group name="defaultProducts"> -->
						<view class="buy-list-item-out flex-column-around"
							  v-for="item in buyList"
							  style="width: 100%;height: 140px;box-sizing: border-box;box-shadow: 0 0 10px 0 #ddd;border-radius: 10px;margin-bottom: 10px;">
							<!-- <label> -->
							<!-- 上方内容区域 -->
							<view class="buy-list-item flex-row-around" style="width: 100%;height: 100px;">
								<!-- 左边单选框 -->
								<view class="buy-list-item-checkbox"
									  style="width: 180rpx;height: 100%; z-index: 5;">
									<checkbox :checked="isSync(item.advProductsId)" :value="item.advProductsId" @click="syncClick(item.advProductsId)"
												style="width: 60rpx;height: 30px; margin: 35px 10rpx"></checkbox>
									<!-- <radio :value="item.advProductsId" /> -->
								</view>
								<!-- 右边列表内容 -->
								<view class="buy-list-item-itembody" style="width: 620rpx;height: 100%;">
									<!-- 列表项 -->
									<view class="buy-list-item flex-row" style="width: 100%;height: 100px;border-bottom: 1px solid #aaa;">
										<!-- 左边图片 -->
										<view class="buy-list-item-image" style="width: 90px;height: 80px;">
											<image :src="baseUrl+item.productImage" 
												   style="width: 80px;height: 80px;border-radius: 10px;"></image>
											<!-- 播放按钮 -->
											<!-- <view class="play-icon" style="position: absolute;
																		   left: 50%;top: 50%;
																		   transform: translate(-50%,-50%);">
												<uni-icons
													type="download" 
													size="30"></uni-icons>
											</view> -->
										</view>
										<!-- 右边内容 -->
										<view class="buy-list-item-right flex-column" style="flex: 1; height: 80px;">
											<!-- 正文 -->
											<view class="item-right-content" style="height: 60px; font-weight: 550;">
												{{item.productName}}
											</view>
											<!-- 底部 -->
											<view class="item-right-bottom flex-row" style="width: 100%; height: 20px; font-size: 12px;color: #aaa;">
												<!-- 浏览量-->
												<view class="bottom-read">
													<text class="bottom-read-text">浏览量 1314</text>
												</view>
												<!-- 时间-->
												<view class="bottom-data">
													<text class="bottom-data-good">
														2024-05-20
													</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- </label> -->
							<!-- 设置默认 -->
							<view class="default" 
								  style="width: 700rpx;height: 40px;
										 background-color: #ccc;border-radius: 0 0 10px 10px;
										 box-shadow: inset 0 0 10px 0 #aaa;
										 display: flex;justify-content: start;align-items: center;">
								<view v-if="item.syncFlag == 1 && item.advProductsId == this.defaultVideoProduct.advProductsId"  class="default-left" 
														   style="width: 120px;height: 30px;
																  margin-left: 100rpx;text-align: center;line-height: 30px;
																  font-weight: bold;color: limegreen;">
									默认播放内容
								</view>
								<view v-if="item.syncFlag == 1 && item.advProductsId != this.defaultVideoProduct.advProductsId"  class="default-right" @click="updateDefault(item)"
									style="margin-left: 400rpx;width: 100px;height: 30px;
										   border-radius: 5px;background-color: black;
										   text-align: center;line-height: 30px;color: white;font-weight: bold;
										   box-shadow: 0 0 10px 0 #aaa;">
									<view class="body" style="width: 100%;height: 100%;">
										设为默认
									</view>
								</view>
							</view>
						</view>
				<!-- </radio-group> -->
			</checkbox-group>
		</view>
		<!-- 低部上传到我的设备按钮 -->
		<view class="bottom"
			  style="width: 100%;height: 100px;
					 position: sticky;left: 0;bottom: 0;
					 z-index: 999;">
			<view @click="syncProductDevice" :class="{'bottom-button': true, 'position-center': true, 'bottom-button-upload': canUpload}">
				更新设备的内容
			</view>
		</view>
	</view>
</template>

<script>
	import { BASE_IMAGE_URL, GET_USER_INFO } from '../../../utils/CommonValues.js';
	import request from '../../../utils/request.js';
	export default {
		data() {
			return {
				checkBox: [], // 被选中的列表 id
				userInfo: {},
				deviceChoseValue: '',
				defaultVideoProduct: {},
				deviceList: [
					{value: 1, text:'张三1'}
				],
				canUpload: false, // 已购内容中, 是否可以上传
				buyList: [],
			}
		},
		onLoad() {
			this.baseUrl = BASE_IMAGE_URL;
			GET_USER_INFO().then(res => {
				this.userInfo = res;
				this.getDeviceno();
				// 查询已内容
				this.findBuy();
			})
		},
		watch: {
			checkBox(value) {
				console.log(value, "value")
				this.canUpload = value.length != 0;
			}
		},
		methods: {
			syncClick(productsId) {
				console.log(productsId, "被点击了")
				this.buyList.filter(item => {
					if(item.advProductsId == productsId) {
						console.log("被点击的数据", item)
						if(item.syncFlag == 1) {
							item.syncFlag = 0;
							this.checkBox = this.checkBox.filter(i => i != productsId)
						} else {
							item.syncFlag = 1;
							this.checkBox.push(productsId);
							this.canUpload = this.checkBox.length != 0;
							console.log("添加了数据之后", this.checkBox)
						}
					}
				})
			},
			isSync(productsId) {
				var result = false;
				for(var i = 0; i < this.checkBox.length; i++) {
					if(productsId == this.checkBox[i]) {
						result = true;
						break;
					}
				}
				console.log("返回的结果", result, productsId)
				return result;
			},
			// 根据设备编号获取内容产品
			getBuyDevicesno() {
				request.GET(`/system/products/findbuy/withdevicesno/${this.deviceChoseValue}/${this.userInfo.advMembersId}`)
					   .then(response => {
						   console.log(response, "根据设备编号获取的产品")
						   this.buyList = [];
						   this.buyList = response.rows;
						   this.updateCheckBox(this.buyList);
						   this.getDefaultVideo();
					   })
			},
			// 设置默认播放的视屏
			updateDefault(item) {
				console.log("默认播放", item, this.deviceChoseValue);
				if(!this.deviceChoseValue) {
					uni.showToast({
						title: '请先选择设备',
						icon: 'none'
					})
				} else {
					uni.showModal({
						content: `设置内容[${item.productName}]为设备[${this.deviceChoseValue}]的默认播放内容?
								  \n提示: 请先确保内容已更新到设备`,
						confirmText: '是',
						success: (e) => {
							if(e.confirm) {
								const params = {
									devicesno: this.deviceChoseValue,
									advProductsId: item.advProductsId
								}
								request.PUT('/system/devicerelation/change/default', params)
									   .then(response => {
										   console.log(response, "结果");
										   if(response.message == '设置失败') {
											   uni.showToast({
											   	 title: '请先将内容更新到设备',
											   	 icon: 'none'
											   })
										   } else {
											   uni.showToast({
											   	 title: response.message,
											   	 icon: 'none'
											   })
										   }
										   this.getBuyDevicesno();
									   })
							}
						}
					})
				}
			},
			// 已购设备数据改变
			deviceChange(e) {
				this.deviceChoseValue = e;
				console.log("设备", e)
				this.getBuyDevicesno();
			},
			// 根据设备获取默认的播放视频
			getDefaultVideo() {
				request.GET(`/system/devicerelation/list`, {
					advMembersId: this.userInfo.advMembersId,
					devicesno: this.deviceChoseValue,
					isChoosevideo: 1
				}).then(resposne => {
					console.log(resposne, "默认设备");
					if(resposne.rows.length != 0) {
						this.defaultVideoProduct = resposne.rows[0];
					} else {
						this.defaultVideoProduct = {};
					}
				})
			},
			// 获取设备编号
			getDeviceno() {
				request.GET(`/system/inoutstock/getdeviceno/${this.userInfo.advMembersId}`, null)
					   .then(response => {
						   console.log(response, "设备编号")
						   const data = response.data;
						   this.deviceList = data.map(item => {
							   return {
								   value: item.devicesno,
								   text: item.productName + '-' + item.productModel + '-' + item.devicesno
							   }
						   })
					   })
			},
			// 传入值, 改变checkBox的值
			updateCheckBox(values) {
				console.log(values, "根据设备获取的内容的值")
				var check = [];
				for(var i = 0; i < values.length; i++) {
					if(values[i].syncFlag == 1) {
						console.log(values[i].productName, "是同步内容")
						check.push(values[i].advProductsId + "")
					}
				}
				this.checkBox = check;
				console.log(this.checkBox, "根据设备获取的内容的值的check") // 数据正常
			},
			// 找到已经购买的设备内容
			findBuy() {
				request.GET(`/system/ordersdetail/findBuy/${this.userInfo.advMembersId}`)
					   .then(response => {
						   console.log(response, "aaa")
						   this.buyList = response.rows;
						   if(this.buyList.length == 0) {
								this.loadingTitle = '暂无内容';
								this.canUpload = false;
						   } else {
								this.isLoading = false;
								for(var i = 0; i < this.buyList.length; i++) {
									if(this.buyList[i].syncFlag == '1') {
										this.canUpload = true;
										this.checkBox.push(this.buyList[i].advProductsId)
									}
								}
						   }
					   })
			},
			// 已购内容被选中
			// changeCheck(e) {
			// 	console.log("值改变了", e)
			// 	this.checkBox = [...new Set(e.target.value)];
			// 	console.log("值改变了2", this.checkBox)  
			// },
			// 同步产品到设备
			syncProductDevice() {
				if(!this.deviceChoseValue) {
					uni.showToast({
						title: '请先选择设备',
						icon: 'none'
					})
					return;
				}
				if(this.checkBox.length == 0) {
					uni.showModal({
						title: '检测到你未勾选内容, 是否清空上传内容',
						confirmText: '是',
						success: (e) => {
							if(e.confirm) {
								uni.showModal({
									title: '提示',
									content: '需要10秒钟左右才能同步到设备，请耐心等待',
									success() {
										console.log("提示")
									}
								})
								// if(!this.canUpload) {
								// 	this.checkBox.push("91919191"); // 防止数组为空访问不到接口、
								// }
								this.checkBox = this.checkBox.sort();
								console.log(this.checkBox, "提交的数据")
								request.PUT(`/system/devicerelation/syncdevices`, {
									advMembersId: this.userInfo.advMembersId,
									devicesno: this.deviceChoseValue,
									productsIds: this.checkBox
								}).then(res => {
								    uni.showToast({
									   title: res.message,
									   icon: 'none'
								    })
								    this.getBuyDevicesno();
								})
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '需要10秒钟左右才能同步到设备，请耐心等待',
						success() {
							console.log("提示")
						}
					})
					this.checkBox = this.checkBox.sort();
					console.log(this.checkBox, "提交的数据")
					request.PUT(`/system/devicerelation/syncdevices`, {
						advMembersId: this.userInfo.advMembersId,
						devicesno: this.deviceChoseValue,
						productsIds: this.checkBox
					}).then(res => {
					    uni.showToast({
						   title: res.message,
						   icon: 'none'
					    })
					    this.getBuyDevicesno();
					})
				}
			},
		}
	}
</script>

<style lang="less">
.title {
	box-sizing: border-box;
	width: 700rpx;
	height: 30px;
	line-height: 30px;
	margin: 10px auto;
	border-left: 5px solid skyblue;
	padding-left: 10px;
	font-weight: bold;
}
.product-body {
	width: 750rpx;
	padding: 10px;
	box-sizing: border-box;
}
.bottom-button {
	width: 500rpx;
	height: 60px;
	border-radius: 30px;
	background-color: #ccc;
	text-align: center;
	line-height: 60px;
	font-size: 20px;
	font-weight: bold;
	color: white;
	letter-spacing: 5px;
	transition: all .3s;
}
.bottom-button-upload {
	background-color: royalblue;
	box-shadow: 5px 5px 25px -10px black;
}
</style>
